<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-bar">
			<uni-search-bar :focus="true" clearButton="none" cancelButton="none" placeholder="搜索"></uni-search-bar>
		</view>
		<!-- 轮播图 -->
		<swiper class="bannerContent" autoplay circular>
			<swiper-item v-for="(item, index) in swiper.img" :key="index">
				<image :src="item" class="swiperImg"></image>
			</swiper-item>
		</swiper>
		<!-- 金刚区 -->
		<uni-grid class="grid" :column="5" :highlight="true" :square="true" :showBorder="false">
			<uni-grid-item v-for="(item, index) in contentBar" :index="index" :key="index">
				<view class="grid-item-box" @click="navigateToPage(item.name)">
					<!-- 自定义图标 -->
					<uni-icons fontFamily="CustomFont" :size="25" color="#fff">{{item.src}}</uni-icons>
					<!-- 文字 -->
					<text class="text">{{item.name}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- 个性布局 -->
		<view class="radio-body">
			<uni-row>
				<!-- 第一列：左侧图片 栅格占据9格 -->
				<uni-col :span="9">
					<view class="radio-image" @click="goUrl('../play/play')">
						<image :src="content.img" mode=""></image>
						<view class="radio-text">
								<uni-icons type="headphones" color="#fff" size="60rpx"></uni-icons>
								<text class="radio-text-content">{{content.imgTitle}}</text>
							</view>
					</view>
				</uni-col>
				<!-- 右侧图片 栅格占据15格 -->
					<uni-col :span="15" v-for="(item, index) in content.list" :key="'content-' + index">
						<uni-list-item v-bind:title="item.name" v-bind:note="item.disc">
							<template v-slot:footer>
								<image class="slot-image" v-bind:src="item.src" mode="widthFix"></image>
							</template>
						</uni-list-item>
					</uni-col>
			</uni-row>
		</view>
		<!-- 为你推荐 -->
		<uni-section :title="recommend.title" type="circle">
			<MusicListComponent :column="3" :list="recommend.list"></MusicListComponent>
		</uni-section>
		<!-- 最新专辑 -->
		<uni-section :title="newest.title" type="circle">
			<MusicListComponent :column="3" :list="newest.list"></MusicListComponent>
		</uni-section>
		<!-- 独家内容 -->
		<uni-section :title="sole.title" type="circle">
			<MusicListComponent :column="2" :list="sole.list"></MusicListComponent>
		</uni-section>
	</view>
</template>

<script>
	// 1.引入 mock.js 模拟数据
	import {
		swiper, //轮播图数据
		contentBar, //金刚区数据
		content, //个性电台
		recommend, //为你推荐
		newest, //最新专辑
		sole //独家内容
	} from "../commons/mock.js"
	//1.引入音乐列表展示组件
	import MusicListComponent from "./MusicListComponent"


	export default {
		name: "MusicTabPage",
		//2.注册音乐列表组件
		components: {
			MusicListComponent
		},
		data() {
			return {
				swiper, //注册轮播图数据
				contentBar, //金刚区
				content, //个性电台
				recommend, //为你推荐
				newest, //最新专辑
				sole //独家内容
			};
		},
		methods:{
			//定义页面跳转方法
			goUrl(str){
				uni.navigateTo({
					url:str//传入的路劲参数
				});
			},
			//根据入口名称跳转到相应页面
		navigateToPage(name){
			switch(name){
				case '歌手':
					this.goUrl('../singer/singer');
					break;
				case '排行':
					this.goUrl('../ranking/ranking');
					break;
				default:
					//其他入口暂不处理或提示功能开发中
					uni.showToast({
						title: '功能开发中',
						icon: 'none'
					});
					break;
			}
		}
		}
	}
</script>

<style lang="scss">
	//搜索栏
	.search-bar {
		width: 100%;
		background-color: #00c273;
	}

	// 轮播图
	.bannerContent {
		width: 100%;
		height: 320rpx;

		.swiperImg {
			width: 100%;
			height: 100%;
		}
	}

	//金刚区
	.grid {
		/* 金刚区整体 */
		margin: -20rpx 27rpx;
		width: 93%;

		.grid-item-box {
			flex: 1;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			background-color: #00b86b;

			.text {
				margin-top: 15rpx;
				font-weight: 600;
				color: #fff;
			}
		}
	}

	@font-face {
		font-family: CustomFont;
		src: url('../static/iconfont.ttf');
	}

	// 个性电台
	.radio-body {
		margin: 10rpx 20rpx 20rpx;

		.radio-image {
			// 第一列
			position: relative;

			image {
				// 背景图片
				width: 90%;
				height: 275rpx;
			}
		}

		.radio-text {
			// 耳机图标与文字
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-60%, -50%);
			color: white;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;

			.radio-text-content {
				// 文字
				display: block;
				margin-top: 10rpx;
			}
		}

		.slot-image {
			// 第二列图片
			// #ifndef APP-NVUE
			display: block;
			/*  #endif */
			margin-right: 10px;
			width: 50px;
			height: 50px;
		}
	}
</style>